<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Custom Input File Test</title>
  <style type="text/css">
  html, body {
    margin: 0;
    padding: 0;
    font-family: Verdana, sans-serif;
  }
  body {
    font-size: 0.875em;
  }
  form p {
    clear: both;
  }
  ul li {
    display: block;
  }
  </style>
  <script src="http://www.google.com/jsapi"></script>
  <script type="text/javascript">
    google.load("jquery", "1.4.2");
  </script>
  <script src="jquery.custom-input-file.js"></script>
  <script type="text/javascript">
    $(function () {
        $("#fileupload-1").customInputFile({
            filename: "#filename-1"
        });
        $("#fileupload-2").customInputFile({
            filename: "#filename-2"
        });
        $('#clear').bind('click', function () {
          $("#fileupload-1, #fileupload-2").trigger("clear");
        });
    });
  </script>
  <link type="text/css" href="jquery.custom-input-file.css" rel="stylesheet"  />
</head>
<body>
  <div style="margin: 100px;">
    <form action="" method="post">
      <p><input type="file" id="fileupload-1" autocomplete="off" /></p>
      <p><input type="file" id="fileupload-2" autocomplete="off" /></p>
    </form>
    <p><a id="clear" href="javascript:void(0)">clear</a></p>
    <p>Here should be our filenames:</p>
    <ul>
        <li id="filename-1"></li>
        <li id="filename-2"></li>
    </ul>
  </div>
</body>
</html>